<template>
  <div class="air_temp">
    <div>
      <p class="title">土壤温度</p>
    </div>
    <div ref="chartRef" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import axios from 'axios';
import * as echarts from 'echarts';
import {useStore} from "@/store/index.js";

// 引用 ECharts 容器
const chartRef = ref(null);

// 存储获取到的空气温度数据
const airData = ref({
  name: '',
  value: 0
});

// 存储 ECharts 实例
let myChart = null;
// 存储定时器ID
let intervalId = null;

// 获取最新的空气温度数据
const fetchAirTempData = async () => {
  try {
    const userStore = useStore();
    const token = userStore.token;
    // 假设 Authorization 是 Bearer token，你可以根据自己的需要修改
    console.log("air"+token);
    const response = await axios.get('/api/soil/temperature/latest?sensorType=SoilTemperature', {
      headers: {
        Authorization: `Bearer ${token}`, // 假设 token 已定义
      },
    });
    console.log(response);

    // 处理返回的数据
    const data = response.data;
    airData.value = {
      name: data.name,
      value: data.value
    };

    // 获取数据后更新图表
    updateChart();
  } catch (error) {
    console.error("Error fetching air temperature data:", error);
  }
};

// 更新图表
const updateChart = () => {
  if (myChart) {
    console.log('Air Data:', airData.value); // 确保 airData.value 正确
    const option = {
      series: [
        {
          type: 'gauge',
          center: ['50%', '60%'], // 中心点位置不变
          startAngle: 200,
          endAngle: -20,
          min: 0,
          max: 60,
          splitNumber: 12,
          itemStyle: {
            color: '#ff8e6a'
          },
          progress: {
            show: true,
            width: 18 // 缩小进度条宽度
          },
          pointer: {
            show: false
          },
          axisLine: {
            lineStyle: {
              width: 18 // 缩小轴线宽度
            }
          },
          axisTick: {
            distance: -27, // 缩小刻度线与轴线的距离
            splitNumber: 5,
            lineStyle: {
              width: 1, // 缩小刻度线宽度
              color: '#999'
            }
          },
          splitLine: {
            distance: -31, // 缩小分割线与轴线的距离
            length: 8, // 缩小分割线长度
            lineStyle: {
              width: 2, // 缩小分割线宽度
              color: '#999'
            }
          },
          axisLabel: {
            distance: -12, // 缩小刻度标签与轴线的距离
            color: '#999',
            fontSize: 12 // 缩小刻度标签字体大小
          },
          anchor: {
            show: false
          },
          title: {
            show: false
          },
          detail: {
            valueAnimation: true,
            width: '100%',
            lineHeight: 24, // 缩小详情区域行高
            borderRadius: 8,
            offsetCenter: [0, '55%'],
            fontSize: 15, // 缩小详情区域字体大小
            fontWeight: 'bolder',
            formatter: '{value} °C',
            color: 'inherit'
          },
          data: [
            {
              value: airData.value.value // 使用获取到的空气温度值
            }
          ]
        }
      ]
    };

    myChart.setOption(option); // 更新图表
  }
};

// 初始化 ECharts
onMounted(() => {
  myChart = echarts.init(chartRef.value);
  fetchAirTempData(); // 获取数据
  intervalId = setInterval(fetchAirTempData, 600000); // 每10分钟刷新一次数据
});

// 清理资源
onBeforeUnmount(() => {
  if (intervalId) {
    clearInterval(intervalId);
  }
  if (myChart) {
    myChart.dispose();
    myChart = null;
  }
});
</script>

<style scoped>
.air_temp {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.title {
  text-align: center;
  font-size: 1vw; /* 调小字体 */
  font-weight: bold;
  color: #00eaff;
  text-shadow: 0px 0px 8px #00eaff; /* 标题发光效果 */
  margin-bottom: 1vw;
}
</style>
